<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta name="description" content="xxxxx">
<meta name="author" content="xxxxx">
<meta name="keyword" content="xxxxx">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>xxxxx</title>
<!-- start: Css -->
<link rel="stylesheet" type="text/css" href="/asset/css/bootstrap.min.css">
<!-- plugins -->
<link rel="stylesheet" type="text/css" href="/asset/css/plugins/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="/asset/css/plugins/simple-line-icons.css"/>
<link rel="stylesheet" type="text/css" href="/asset/css/plugins/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="/asset/css/plugins/fullcalendar.min.css"/>
<link href="/asset/css/style.css" rel="stylesheet">
  <!-- start: Javascript -->
  <script src="/asset/js/jquery.min.js"></script>
  <script src="/asset/js/jquery.ui.min.js"></script>
  <script src="/asset/js/bootstrap.min.js"></script>
  <!-- plugins -->
  <script src="/asset/js/plugins/jquery.nicescroll.js"></script>
  <!-- custom -->
<!--  <script src="/asset/js/main.js"></script>-->
<!-- end: Css -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="/asset/js/html5shiv.min.js"></script>
      <script src="/asset/js/respond.min.js"></script>
    <![endif]-->
    <style>
        .centerMode{

            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
        }
    </style>
</head>

<body id="mimin" class="dashboard">
<!-- start: Header -->
<!--<nav class="navbar navbar-default header navbar-fixed-top">
  <div class="col-md-12 nav-wrapper">
    <div class="navbar-header" style="width:100%;">
      <div class="opener-left-menu is-open"> <span class="top"></span> <span class="middle"></span> <span class="bottom"></span> </div>
      <a href="index.html" class="navbar-brand"> <b>xxxxx</b> </a>
      <ul class="nav navbar-nav navbar-right user-nav">
        <li class="user-name"><span>xxx</span></li>
        <li class="dropdown avatar-dropdown"> <img src="/asset/img/avatar.jpg" class="img-circle avatar" alt="user name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"/>
          <ul class="dropdown-menu user-dropdown">
            <li><a href="#"><span class="fa fa-power-off"></span> 退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>-->
<!-- end: Header -->
<div class="container-fluid mimin-wrapper"> 
  <!-- start:Left Menu -->
  <!--<div id="left-menu">
    <div class="sub-left-menu scroll">
      <ul class="nav nav-list">
        <li>
          <div class="left-bg"></div>
        </li>
        <li class="ripple"> <a class="tree-toggle nav-header" id="left-menu-1"><span class="fa-home fa"></span> 首页 <span class="fa-angle-right fa right-arrow text-right"></span> </a> </li>
        <li class="ripple active"> <a class="tree-toggle nav-header"  id="left-menu-2"> <span class="fa-diamond fa"></span> 签约审核 <span class="fa-angle-right fa right-arrow text-right"></span> </a>
          <ul class="nav nav-list tree" >
            <li><a href="signlist.html">签约作者</a></li>
            <li><a href="examinelist.html">作品审核</a></li>
          </ul>
        </li>
        <li class="ripple active"> <a class="tree-toggle nav-header"  id="left-menu-2"> <span class="fa-diamond fa"></span> 版权声明及公告 <span class="fa-angle-right fa right-arrow text-right"></span> </a>
          <ul class="nav nav-list tree" >
            <li><a href="list.html">拉黑声明</a></li>
            <li><a href="edit.html">版权公告</a></li>
          </ul>
        </li>
        <li class=" ripple"> <a class="tree-toggle nav-header"  id="left-menu-3"><span class="fa fa-check-square-o"></span> 首页 <span class="fa-angle-right fa right-arrow text-right"></span> </a> </li>
        <li class=" ripple"> <a class="tree-toggle nav-header"  id="left-menu-4"><span class="fa fa-calendar-o"></span> 首页 <span class="fa-angle-right fa right-arrow text-right"></span> </a> </li>
      </ul>
    </div>
  </div>-->

  <!-- end: Left Menu --> 
  
  <!-- start: content -->
  <div id="content">
    <div class="panel">
      <div class="panel-body">
          <div class="panel-body" style="padding-bottom:30px;">
              <div class="form-group">
                  <label class="col-sm-1 control-label text-right" style="font-size: 20px;width: auto">签约状况查询：</label>
                  <div class="col-sm-2">
                      <select class="form-control" onclick="caseselect()">
                          <option>未选择</option>
                          <option>已签约</option>
                          <option>待签约</option>
                          <option>未通过</option>
                          <option>已解约</option>
                      </select>
                  </div>
                  
              </div>
          </div>
      </div>
    </div>
    <div class="col-md-12 padding-0 form-element">
      <div class="col-md-12">
        <div class="panel">
          <div class="panel-heading">
            <h3>签约状态信息</h3>
          </div>
          <div class="panel-body">
            <div class="responsive-table">
              <div id="datatables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                <div class="row">
                  <div class="col-sm-12">
                    <table class="table table-striped table-bordered dataTable no-footer" width="100%" cellspacing="0"  style="width: 100%;">
                      <thead>
                        <tr role="row" align="center">
                          <th class="sorting_asc"style="width: 60px;">签约作者</th>
                          <th class="sorting" style="width: 60px;">申请时间</th>
                          <th class="sorting" style="width: 60px;">开始时间</th>
                          <th class="sorting" style="width: 60px;">结束时间</th>
                          <th class="sorting"  style="width: 60px;">签约状态</th>
                          <th class="sorting"  style="width: 61px;">签约时间</th>
                          <th class="sorting"  style="width: 61px;">解约时间</th>
                          <th class="sorting"  style="width: 61px;">签约说明</th>
                        </tr>
                      </thead>
                      <tbody id="signlist">

                      </tbody>
                    </table>
                      <span style="font-size: 10px">当前第 条记录
                          <ul class="pagination" style="align-items: end">
                              <li>
                                  <a href="#" aria-label="Previous">
                                      <span aria-hidden="true">&laquo;</span>
                                  </a>
                              </li>
                              <li><a href="#">1</a></li>
                              <li><a href="#">2</a></li>
                              <li><a href="#">3</a></li>
                              <li><a href="#">4</a></li>
                              <li><a href="#">5</a></li>
                              <li>
                                  <a href="#" aria-label="Next">
                                      <span aria-hidden="true">&raquo;</span>
                                  </a>
                              </li>
                          </ul>
                      </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end: content -->
    <!--模态框-->
    <div class="modal fade centerMode" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" style="align-content: center">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                    <p id="state"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script>
    var sig;
  $(function () {
    $.ajax({
      url:"/sign/signlist",
      success:function (data) {
          sig=data;
        console.log(data);
        var html = "";
        for (let i = 0; i < data.length; i++) {
            var status=data[i].sign_status;
            var status2;
            switch (status) {
                case 0:status2="已签约";break;
                case 1:status2="待签约";break;
                case 2:status2="未通过";break;
                case 3:status2="已解约";break;
            }
          html += "<tr align='center'>" +
                  "<td>" + data[i].user_name + "</td>" +
                  "<td>" + data[i].apply_time + "</td>" +
                  "<td>" + data[i].start_time + "</td>" +
                  "<td>" + data[i].end_time + "</td>" +
                  "<td>" + status2 + "</td>" +
                  "<td>" + data[i].sign_time + "</td>" +
                  "<td>" + data[i].cancel_time + "</td>" +
                  "<td>" + "<button type=\"button\" class=\"btn btn-info\" id='btn' onclick='btn("+i+")' data-toggle=\"modal\" data-target=\".fade\">查看</button>"+ "</td>" +
                  "</tr>"
        }
        $("#signlist").html(html);
      }
    })
    // $.post({
    //   "sign/signlist",function(data) {
    //     console.log(data)
    //     var html = "";
    //     for (let i = e; i < data.length; i++) {
    //       html += "<tr>" +
    //               "<td>" + data[i].name + "</td>" +
    //               "<td>" + data[i].age + "</td>" +
    //               "<td>" + data[i].sex + "</td>" +
    //               "</tr>"
    //     }
    //     $("#signlist").html(html);
    //   }
    // });
  })
    function btn(a) {
      console.log(sig)
      $("#state").html(sig[a].sign_state)
    }
    function  caseselect() {
       var states;
       if($(".form-control").val()=="未选择") states=4;
       if($(".form-control").val()=="已签约") states=0;
       if($(".form-control").val()=="待签约") states=1;
       if($(".form-control").val()=="未通过") states=2;
       if($(".form-control").val()=="已解约") states=3;
       $.ajax({
           url:"/sign/signlist2",
           data:{
               "signstatus":states
           },
           success(data){
               sig=data;
               console.log(data);
               var html = "";
               for (let i = 0; i < data.length; i++) {
                   var status=data[i].sign_status;
                   var status2;
                   switch (status) {
                       case 0:status2="已签约";break;
                       case 1:status2="待签约";break;
                       case 2:status2="未通过";break;
                       case 3:status2="已解约";break;
                   }
                   html += "<tr align='center'>" +
                       "<td>" + data[i].user_name + "</td>" +
                       "<td>" + data[i].apply_time + "</td>" +
                       "<td>" + data[i].start_time + "</td>" +
                       "<td>" + data[i].end_time + "</td>" +
                       "<td>" + status2 + "</td>" +
                       "<td>" + data[i].sign_time + "</td>" +
                       "<td>" + data[i].cancel_time + "</td>" +
                       "<td>" + "<button type=\"button\" class=\"btn btn-info\" id='btn' onclick='btn("+i+")' data-toggle=\"modal\" data-target=\".fade\">查看</button>"+ "</td>" +
                       "</tr>"
               }
               $("#signlist").html(html);
           }
       });
    }
</script>
<!-- end: Javascript -->
</body>
</html>